<template>
	<view class="book">{{learnbook}}</view>
	<view class="study" style="height: 500px;width:100%;">
		
		<view class="word">{{learnword}}</view>
		<input class="English" type="text" placeholder="请输入对应英语的中文" adjust-position="ture" />
		<view class="Progress">当前剩余{{reviewNum}}词未复习</view>
		</view>
	<view class="tool">
		<button class="updownsay" @click="before">before</button>
		<button class="updownsay" @click="pronounce">发音</button>
		<button class="updownsay" @click="next">next</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				learnbook: "复习",
				learnword: "123",
				reviewNum: "10",
				// 这是还未复习的单词
				AllNum: "",
				// 这是总的要复习的单词
			}
		},
		methods: {
			reviewNum() {

			},
			AllNum() {

			},
			before() {

			},
			pronounce() {

			},
			next() {

			},
		}
	}
</script>

<style>
	.study {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		flex-direction: column;
	}

	.book {
		height: 65px;
		width: 100%;
		background-color: #21252b;
		color: #ffffff;
		text-align: center;
		line-height: 65px;
	}

	.word {
		height: 400px;
		width: 100%;
		text-align: center;
		line-height: 400px;
	}

	.Progress {
		height: 35px;
		width: 70%;
		background-color: coral;
		text-align: center;
		line-height: 35px;
		margin-top: 20px;
	}

	.tool {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		height: 100px;
		width: 100%;
	}

	.updownsay {
		height: 70px;
		width: 30%;
		background-color: #282c35;
		color: #ffffff;
		line-height: 70px;
	}
	.English{
		height: 50px;
		width: 70%;
		background-color: #ffffff;
		text-align: center;
		line-height: 35px;
		border:1px #21252b;
	}
</style>